<template>
  <div class="room-introduction">
    <div class="room-main">
      <div class="room-main-item">
        <div class="banner">
          <van-swipe class="banImg" :autoplay="3000" @change="onChange">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img class="itemImg" v-lazy="image" />
            </van-swipe-item>
          </van-swipe>
          <!-- 指示器 -->
          <div class="custom-indicator" slot="indicator">
            {{ current + 1 }}/4
          </div>
        </div>
        <div>
          <van-cell-group>
            <van-cell class="title" title="豪华总统套房" />
          </van-cell-group>
        </div>
        <van-collapse v-model="activeNames">
          <van-collapse-item title="房屋设施" name="1">
            <div class="rooms van-hairline--bottom">
              <van-row class="rooms-item">
                <van-col span="8">可住人数：2人</van-col>
                <van-col span="8">窗户：有窗</van-col>
                <van-col span="8">房间面积：约25平米</van-col>
              </van-row>
              <van-row class="rooms-item">
                <van-col span="8">客房楼层：3楼</van-col>
                <van-col span="8">洗衣机：无</van-col>
                <van-col span="8">房间床型：2床 2*1.2米</van-col>
              </van-row>
              <van-row class="rooms-item">
                <van-col span="8">空调：有</van-col>
                <van-col span="8">网络：有wifi</van-col>
                <van-col span="8">热水：24小时热水</van-col>
              </van-row>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ["1"],
      current: 0,
      images: [
        "https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg",
        "https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg",
        "https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg",
        "https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg"
      ]
    };
  },
  mounted() {},
  methods: {
    onChange(index) {
      this.current = index;
    }
  }
};
</script>

<style lang="stylus" scoped>
.room-main {
  padding-bottom: 2rem;

  .banImg {
    padding: 0 15%;

    .itemImg {
      width: 70%;
      height: 5rem;
    }
  }

  .custom-indicator {
    position: absolute;
    top: 5.5rem;
    right: 0.2rem;
    background-color: #eee;
    padding: 0.1rem 0.2rem;
    border-radius: 10px;
  }

  .rooms-item {
    line-height: 0.6rem;
  }
}
</style>
